import EReact from "./EReact";
import {Recordable} from "./type";

/**
 * define a container to render element <br/>
 * this container must be a dom element  <br/>
 */
const container = document.getElementById("app");
/**
 * use your react create an element
 */
// const element = EReact.createElement(
//     "div",
//     {id: "foo"},
//     EReact.createElement("a", null, "bar"),
//     EReact.createElement("b", null)
// )

/**
 * function component
 */

function App(props: Recordable) {
    const [count, setCount] = EReact.useState(1)
    return EReact.createElement(
        "div",
        {
            id: 'foo',
            onClick: () => {
                setCount((c: number) => c + 1)
            }
        },
        EReact.createElement("a", null, props.name),
        EReact.createElement("b", null, count),
    )
}

const element = EReact.createElement(App, {name: 'foo'})

EReact.render(element, container)